<!doctype html>
<!--
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
  <head>
    <title>callbacks</title>
    <script src="../../../webcomponentsjs/webcomponents.js"></script>
    <link rel="import" href="../../polymer.html">
    <script src="../../../tools/test/htmltest.js"></script>
    <script src="../../../tools/test/chai/chai.js"></script>
  </head>
  <body>

  <x-base></x-base>
  
  <x-extendor></x-extendor>

  <x-nested-repeat></x-nested-repeat>
  
  <polymer-element name="x-base">
    <script>
      Polymer('x-base', {
        ready: function() {
          this.isReadied = true;
        },
        attached: function() {
          this.isInserted = true;
        },
        detached: function() {
          this.isRemoved = true;
        },
        attributeChanged: function() {
          this.hasAttributeChanged = true;
        }
      });
    </script>  
  </polymer-element>
  
  <polymer-element name="x-extendor" extends="x-base">
    <script>
      Polymer('x-extendor', {
        ready: function() {
          this.extendedIsReadied = true;
          this.super();
        },
        attached: function() {
          this.extendedIsInserted = true;
          this.super();
        },
        detached: function() {
          this.extendedIsRemoved = true;
          this.super();
        },
        attributeChanged: function() {
          this.extendedHasAttributeChanged = true;
          this.super();
        }
      });
    </script>  
  </polymer-element>

  <polymer-element name="x-repeat">
    <template>
      <template bind="{{}}">
        <x-base>base</x-base>
      </template>
      <div id="container">
        <template repeat="{{stuff}}">
          <x-extendor>{{}}</x-extendor>
        </template>
      </div>
    </template>
    <script>
      Polymer('x-repeat', {
        ready: function() {
          this.stuff = [1, 2, 3];
          this.onMutation(this.$.container, function() {
            // TODO(sorvell): SD polyfill mutation observer ordering issue, file bug
            setTimeout(function() {
              var base = this.shadowRoot.querySelector('x-base');
              chai.assert.isTrue(base.isReadied, 'template bind stamped element is ready');
              chai.assert.isTrue(base.isInserted, 'template bind stamped element is enteredView');
              var exts = this.shadowRoot.querySelectorAll('x-exendor');
              for (var i=0, e; (i < exts.length) && (e = exts[i]); i++) {
                chai.assert.isTrue(e.isReadied, 'template repeat stamped element is ready');
                chai.assert.isTrue(e.isInserted, 'template repeat stamped element is enteredView');
              }
              done();
            }.bind(this));
          });
        }
      });
    </script>  
  </polymer-element>

  <polymer-element name="x-nested-repeat" noscript>
    <template>
      <x-repeat id="repeat"></x-repeat>
    </template>
  </polymer-element>
 
  <script>
    document.addEventListener('polymer-ready', function() {
      var xBase = document.querySelector('x-base');
      chai.assert.equal(xBase.isReadied, true);
      chai.assert.equal(xBase.isInserted, true);
      xBase.setAttribute('foo', 'foo');
      chai.assert.equal(xBase.hasAttributeChanged, true);
      
      var xExtendor = document.querySelector('x-extendor');
      chai.assert.equal(xExtendor.isReadied, true);
      chai.assert.equal(xExtendor.extendedIsReadied, true);
      chai.assert.equal(xExtendor.isInserted, true);
      chai.assert.equal(xExtendor.extendedIsInserted, true);
      xExtendor.setAttribute('foo', 'foo');
      chai.assert.equal(xExtendor.hasAttributeChanged, true);
      chai.assert.equal(xExtendor.extendedHasAttributeChanged, true);
      
      xBase.parentNode.removeChild(xBase);
      xExtendor.parentNode.removeChild(xExtendor);
      // Ensure IE goes...
      CustomElements.takeRecords();
      chai.assert.equal(xBase.isRemoved, true);
      chai.assert.equal(xExtendor.isRemoved, true);
      chai.assert.equal(xExtendor.extendedIsRemoved, true);
    });
  </script>
  </body>
</html>
